<template>
  <view class="item" v-for="(item, index) in 10" :key="index" :class="type[index]">
    <view class="header"> CONVERGE-{{ index }} </view>
    <view class="footer">
      <view class="footer-left"> 审核时间：{{ date }} </view>
      <view class="footer-state" :class="type[index]"> {{ type[index] == 'warning' ? '离线' : '在线'}} </view>
    </view>
  </view>
</template>

<script setup>
  import dayjs from 'dayjs';

  defineProps({
    list: {
      type: Array,
      default: [],
    },
  });

  const date = dayjs().format('YYYY-MM-DD HH:mm:ss');

  const type = [
    'primary',
    'warning',
    'primary',
    'warning',
    'primary',
    'warning',
    'primary',
    'warning',
  ];
</script>

<style lang="scss" scoped>
  .item {
    width: 700rpx;
    margin: 20rpx auto 0;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
    padding: 26rpx 40rpx 20rpx;
    box-sizing: border-box;
    border-left: 8rpx solid #007ff2;
    &.warning {
      border-color: #ff6c00;
    }

    .header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;
      margin-bottom: 19rpx;
      font-size: 34rpx;
      color: #444;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      .footer-left {
        color: #777777;
      }
      .footer-state {
        &.warning {
          color: #ff6c00;
        }
        color: #007ff2;
      }
    }
  }
</style>
